<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
	{{fullName}}
</div>
<script>
	var vm = new Vue({
		el : '#root',
		data : {
			firstName : 'Li',
			lastName : 'Jin Wen',
		},
		computed : {
			fullName : {
				set : function(newValue){
					console.log(newValue);
					var names = newValue.split(' ');
					console.log(names);
					this.firstName = names[0];
					this.lastName = names[names.length-1];
				},
				get : function(){
					return this.firstName + ' ' + this.lastName;
				}
			}
		}
	});
	/**
	 * 如果我们调用 vm.fullName = 'John Doe'时，
	 * setter 就会被调用。vm.firstName和vm.lastName也会有相应更新。
	 * 这个方法，在有些时候是很有用的。
	 */
</script>	
</body>
</html>